<% include header.html %>
	<img class="bg-img" src="/images/bgima.jpg">
	<header class="min-width-768px">`
		<img src="/images/header-logo.png">
		<span class="WeShare"> WeShare </span>
		<a class="downloadapp-a" data-index='1' target='_blank' href="https://play.google.com/store/apps/details?id=com.yiba.sharewe.lite.activity">Download APP</a>
	</header>

	    <div class="main-1 min-width-768px">
	    	<div class="container">
	    		<div class="row margin-top-15vh">
	    			<div class="col-xs-6 color-ffffff padding-left-10vh">
		    			<h2 class="title font-weight-bold">Free WiFi covered in 10,000+ cities</h2>
		    			<h3 class="margin-top-30px title_1">
		    				Connect to free WiFi within one 
		    				click when you're away from home
		    			</h3>
	    			</div>
	    			<div class="col-xs-6 text-align-center padding-0">
	    				<div class="search-form width-80 background-color-ffffff margin-left-10 color-B4B4B4">
		    				<div class="search-form-div1">
		    					<i class="glyphicon glyphicon-search color-000000"></i>
		    					<input type="text" id="citySelect" class="font-size-18px search-input  height-40px" placeholder="Search for your city">
		    				</div>
		    				<h1 class="form-title text-align-center"></h1>
		    				<h6 class="text-align-center changeCtiyMassage"><%= changeCtiyMassage %></h6>
		    				<div class="row">
		    					<div class="col-xs-7 text-align-right margin-top-20px padding-right-0">
			    					<h4 class="color-333333 font-weight-bold">
			    						<span id="wifiNum"> loading... </span>
			    					</h4>
		    					</div>
		    					<div class="col-xs-5">		    						
		    						<a class="downloadapp-a" data-index='2' target='_blank' href="https://play.google.com/store/apps/details?id=com.yiba.sharewe.lite.activity">
		    							<button class="download-button">
		    								Download
		    							</button>
		    						</a>
		    					</div>
		    				</div>

	    					<!-- <div>
								<div class="form-group">
									<div class="input-group">
										<div class="search-icon input-group-addon background-color-ffffff border-right-0 height-40px"><i class="glyphicon glyphicon-search"></i></div>
										<input type="text" id="citySelect" class="search-text font-size-18px form-control border-left-0 box-shadow-none height-40px" placeholder="search for your city">
									</div>
								</div>
	    					</div>
	    					<h3 class="form-title" >　</h3>
			    			<small><%= changeCtiyMassage %></small>
	    					<div class="row">
	    						<div class="col-xs-7 padding-top-10px">    							
			    					<h3 class="color-333333 font-weight-bold"><span id="wifiNum"> loading... </span></h3>
	    						</div>
	    						<div class="col-xs-5 text-align-right">
	    						</div>
	    					</div> -->
	    				</div>
	    			</div>
	    			
	    		</div>
	    	</div>
	    </div>
	<div class="main-2 min-width-768px">
		<div class="container">
			<div class="row">
				<div class="col-xs-6 text-align-center">
					<img src="/images/phone.png">
				</div>
				<div class="col-xs-6 color-ffffff">
					<h2 class="title">Off-line WiFi password<br>offered by WeShare</h2>
					<h3 class="content">
						WeShare offers you a password package 
						<br>
						accordin to your city's location. With 
						<br>
						5,000+ WiFi passwords, staying connected 
						<br>
						has never been easier.
					</h3>
				</div>
		    	<a class="downloadapp-a" data-index='3' target='_blank' href="https://play.google.com/store/apps/details?id=com.yiba.sharewe.lite.activity">
					<button class="download-button-2">
						Download WeShare app
					</button>
		    	</a>
			</div>
		</div>
	</div>

    <div class="main-3 dummy-content min-width-768px">
		<div class="container">
	        <h2 class="font-weight-bold color-000000 title">It's all about connection</h2>
	        <p class="title-1">
	        	Stay connected by using free WiFi shared by other users
	        </p>
		    <a class="downloadapp-a" data-index='4' target='_blank' href="https://play.google.com/store/apps/details?id=com.yiba.sharewe.lite.activity">
			    <button class="download-button-2">
			    	Download WeShare app
			    </button>
		    </a>
	        <img class="width" src="/images/phone-2.png">

		</div>
    </div>
    <div class="main-4 padding-bottom-50px min-width-768px">
    	<div class="container">		
		    <h2 class="title font-weight-bold color-000000 text-align-center">Comments from users</h2>
		    <div class="row text-align-center">
		    	<div class="col-xs-4 margin-top-10px comment">
		    		<img src="/images/1.png">
		    		<div class='user-info-div'>
		    			<p>Patrick Polk</p>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    		</div>
		    		<p class="font-size-18px text-align-left">This app has helped me stay connected since I downloaded it</p>
		    	</div>
		    	<div class="col-xs-4 margin-top-10px comment">
		    		<img src="/images/2.png">
		    		<div class='user-info-div'>
		    			<p>Ronald Foster</p>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    		</div>
		    		<p class="font-size-18px text-align-left">Very helpful! Great WiFi sharing app</p>
		    	</div>
		    	<div class="col-xs-4 margin-top-10px comment">
		    		<img src="/images/4.png">
		    		<div class='user-info-div'>
		    			<p>Mike Husson</p>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    		</div>
		    		<p class="font-size-18px text-align-left">Wonderful app! I can enjoy YouTube while away from home and can also check the connection speed. </p>
		    	</div>
		    	<div class="col-xs-4 margin-top-10px comment">
		    		<img src="/images/3.png">
		    		<div class='user-info-div'>
		    			<p>Jack Mcdaniel</p>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    		</div>
		    		<p class="font-size-18px text-align-left">Nice app for finding free WiFi. Easy to use I love it!</p>
		    	</div>
		    	<div class="col-xs-4 margin-top-10px comment">
		    		<img src="/images/5.png">
		    		<div class='user-info-div'>
		    			<p>Elaine Daswani</p>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    		</div>
		    		<p class="font-size-18px text-align-left">WeShare is definitely a must have for travelers! With the WiFi map function, I can easily navigate to somewhere with free WiFi when I am out of mobile data.</p>
		    	</div>
		    	<div class="col-xs-4 margin-top-10px comment">
		    		<img src="/images/6.png">
		    		<div class='user-info-div'>
		    			<p>Katherine Lim</p>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    			<i class="glyphicon glyphicon-star color-FFDC01"></i>
		    		</div>
		    		<p class="font-size-18px text-align-left">The apps is very helpful for finding open WiFi and the connection speed is impressive.</p>
		    	</div>

		    </div>
    	</div>
    </div>
    <footer>
    	<div class="container">
	    	<small>© 2014-2016上海易跋信息科技有限公司版权所有</small>
    		
    	</div>
    </footer>
	<script type="text/javascript" src="javascripts/cityselect.js"></script>
    <script>
    	$(document).ready(function() {
    		// 填写城市名称
    		$('.main-1 .form-title')[0].innerHTML = unescape(window.location.pathname.substring(1));

    		// 获取城市list json文件
		    $.getJSON("/json/cityList.json", function(json){
    			var test=new Vcity.CitySelector({input:'citySelect'}, json);
    			// 初始化城市匹配标志为false
    			var matchFlag = false;
    			$(json.cityList).each(function(index, element) {
    				console.log(element)
    				// 比较城市名和url链接地址
    				if ((element.substring(element.indexOf('|') + 1)).substring(0, (element.substring(element.indexOf('|') + 1)).indexOf('|')).toLowerCase() == unescape(window.location.pathname.substring(1).toLowerCase())) {
						// 城市匹配成功
    					matchFlag = true;
    					// console.log(element);
    					// console.log(element.substring(element.lastIndexOf('|') + 1))
    					// 获取所选城市的wifi数
    					$.ajax({
    					  	url: 'http://wifi.18wifibank.com/OW2DD/getCityInfo?cityCode=' + element.substring(element.lastIndexOf('|') + 1),
    						type:'get',
    					  	dataType: 'jsonp',
    						processData: true,
    						timeout: 5000,
    						success:function(data, status){
    							// console.log(data.data.wifiNum);
    							// 填写password
    							$('#wifiNum')[0].innerHTML = data.data.wifiNum + ' passwords';
    						},
    						error:function(XHR, textStatus, errorThrown){
    							console.log('error')
    						}
    					});


    				}
    			})
    			// 判断是否匹配城市
    			if (!matchFlag) {
    				// 没有匹配的场合
    				$('#wifiNum')[0].innerHTML = '未成功检索';
    				console.log('json文件中未找到当前城市')
    			}

		    });

		    var citySelectValueFlag = false;
		    $("#citySelect").bind('input propertychange', function() {
		    	if (!citySelectValueFlag) {
		    		citySelectValueFlag = true;
		    		zhuge.track('入力搜索框', {
		    			'client' : 'PC'
		    		});
		    		console.log('入力搜索框');
		    	}
		    });

		    // 配合埋点，清空入力框
		    $("#citySelect").blur(function(){
		    	$("#citySelect").val('');
		    	citySelectValueFlag = false;
		    });

		    // 埋点
		    if ('Switched to a nearby city with Free WiFi' == '<%= changeCtiyMassage %>') {
		    	console.log('当前IP没有密码包');
		    	zhuge.track('当前IP没有密码包', {
		    		'client' : 'PC'
		    	});
		    }

		    // 点击下载按钮
		    $('.downloadapp-a').on('click', function() {
		    	zhuge.track('点击下载按钮' + $(this).data('index') + '-PC', {
		    		'client' : 'PC'
		    	});
		    	console.log("点击下载按钮" + $(this).data('index') + "-PC")
		    })
    	})

    </script>
<% include footer.html %>
